<template>
  <div>
    <el-form :model="queryForm" inline>
      <el-form-item label="客户名称">
        <el-input v-model="queryForm.cusName" placeholder="请输入客户名称"></el-input>
      </el-form-item>
      <el-form-item label="客户经理">
        <el-input v-model="queryForm.cusManager" placeholder="请输入客户经理"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handleSearch">查询</el-button>
      </el-form-item>
    </el-form>

    <!-- 表格 -->
    <el-table :data="tableData" style="width: 100%;height:520px"
    :cell-style="{'text-align':'center'}"
    :header-cell-style="{'text-align':'center'}">
      <el-table-column label="序号">
        <template #default="scope">
          {{ (pagination.currentPage - 1) * pagination.pageSize + scope.$index + 1 }}
        </template>
      </el-table-column>
      <el-table-column prop="cusNo" label="客户编号"></el-table-column>
      <el-table-column prop="cusName" label="客户名称"></el-table-column>
      <el-table-column prop="cusManager" label="客户经理"></el-table-column>
      <el-table-column prop="lastOrderTime" label="最后下单时间" width="115"></el-table-column>
      <el-table-column prop="confirmLossTime" label="确认流失时间" width="115"></el-table-column>
      <el-table-column prop="state" label="流失状态"></el-table-column>
      <el-table-column prop="lossReason" label="流失原因"></el-table-column>
      <el-table-column prop="createDate" label="创建时间"></el-table-column>
      <el-table-column prop="updateDate" label="更新时间"></el-table-column>
    </el-table>

    <!-- 分页条 -->
    <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pagination.currentPage"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="pagination.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pagination.total">
    </el-pagination>
  </div>
</template>


<script setup>
import {ref, reactive, onMounted} from 'vue';
import {ElForm, ElFormItem, ElInput, ElButton, ElTable, ElTableColumn, ElPagination} from 'element-plus';
import {Edit, Delete} from '@element-plus/icons-vue';
import axios from "axios";

axios.defaults.headers.common['Authorization'] = `Bearer` + localStorage.getItem('token');

// 查询表单数据
const queryForm = reactive({
  cusName: '',
  cusManager: '',
  state: 1,
});

// 表格数据
const tableData = ref([]);

// 分页信息
const pagination = reactive({
  currentPage: 1,
  pageSize: 10,
  total: 0,
});

// 模拟获取数据的函数
const fetchData = async (queryForm) => {

  console.log("查询,参数为：{}",queryForm);
  const params = {
    cusName: queryForm.cusName,
    cusManager: queryForm.cusManager,
    state: queryForm.state,
    page: pagination.currentPage,
    pageSize: pagination.pageSize,
  };
  const result = await axios.get("/api/customerLoss/page",{params});
  console.log(result.data);
  if (result.data.code) {
    tableData.value = result.data.data.records;
    pagination.total = result.data.data.total;
  }
};

// 查询
const handleSearch = () => {
  fetchData(queryForm);
};

// 分页大小改变
const handleSizeChange = (newSize) => {
  pagination.pageSize = newSize;
  fetchData(queryForm);
};

// 当前页改变
const handleCurrentChange = (newPage) => {
  pagination.currentPage = newPage;
  console.log("当前页改变:{}", pagination.currentPage);
  fetchData(queryForm);
};

// 初始化数据
onMounted(() => {
  fetchData(queryForm);
});
</script>

<style scoped>
</style>